<template>
  <div class="uploads">
    <el-upload
      action="/admin/Index/upload"
      :before-upload="init"
      :show-file-list="false"
      :multiple="true"
      ref="upload"
      :on-progress="progress"
      :on-success="success"
      :data="data"
    >
      <el-button size="small" type="primary">上 传</el-button>
    </el-upload>
    <el-dialog
      title="操作"
      :visible.sync="show"
      width="1200px"
      class="list"
      :before-close="close"
      @closed="closed"
      :append-to-body="true"
    >
      <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column label="大小">
          <template slot-scope="scope">{{scope.row.size.toFixed(2)}} MB</template>
        </el-table-column>
        <el-table-column label="进度">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.progress"></el-progress>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="150px">
          <template slot-scope="scope">
            <p class="f40" v-if="!scope.row.state">上传中</p>
            <p style="color: #409eff;" v-else>
              <i class="el-icon-success" style="font-size: 15px;margin-right:5px"></i>
              <span>已上传</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="90px">
          <template slot-scope="scope">
            <div class="order">
              <i class="fa fa-long-arrow-down" @click="order({type:'down',index:scope.$index})"></i>
              <i class="fa fa-long-arrow-up" @click="order({type:'up',index:scope.$index})"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.progress<100 && !scope.row.state"
              @click="stopUpload(scope.$index,scope.row.file)"
              size="small"
            >取 消</el-button>
            <el-button
              v-else
              size="small"
              type="danger"
              @click="del(scope.$index,scope.row.path)"
            >删 除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="after footer">
        <div class="left">
          总 :
          <span>{{list.length}}</span>
          已上传 :
          <span>{{countState()}}</span>
          上传中 :
          <span>{{list.length - countState()}}</span>
        </div>
        <div class="right">
          <div style="display: inline-block;" class="mr-10">
            <el-upload
              action="/admin/Index/upload"
              :before-upload="init"
              :show-file-list="false"
              :multiple="true"
              ref="uploads"
              :on-progress="progress"
              :on-success="success"
              :data="data"
            >
              <el-button size="small" type="primary">继续上传</el-button>
            </el-upload>
          </div>
          <el-button type="primary" @click="submit()" size="small" :disabled="state">保 存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      list: [],
      state: false
    };
  },
  props: ["info", "data"],
  methods: {
    // 计算状态
    countState() {
      var n = 0;
      for (var i in this.list) {
        if (this.list[i].state) {
          n++;
        }
      }
      return n;
    },
    // 关闭动画结束后,清空
    closed() {
      this.list = [];
      this.state = false;
    },
    // 保存
    submit() {
      var list = [...this.list],
        arr = [];
      for (var i in list) {
        if (!list[i].path) {
          this.common.message({
            message: "图片未上传完毕或还没有处理完毕,",
            type: "warning"
          });
          return false;
        }

        arr.push({
          title: list[i].title,
          size: list[i].size,
          path: list[i].path,
          thumb_path: list[i].thumb_path
        });
      }

      this.state = true;

      this.show = false;

      this.$emit("file", { list: arr, info: this.info });
    },
    // 关闭前回调
    close(done) {
      var list = this.list,
        state = 0;
      if (!this.list.length) {
        done();
        return false;
      }
      for (var i in list) {
        if (list[i].progress < 100) {
          state = 1;
          break;
        }
      }
      this.common
        .confirm({
          message: state
            ? "还有文件没有上传完,确定关闭嘛?"
            : "此操作将删除所有上传文件,是否继续?"
        })
        .then(() => {
          for (var i in list) {
            if (list[i].progress < 100) {
              this.$refs.upload.abort(list[i].file);
              this.$refs.uploads.abort(list[i].file);
            } else {
              var data = {
                path: list[i].path
              };
              this.axios.post("/admin/Index/del_file", data);
            }
          }
          this.show = false;
          this.list = [];
        });
    },
    // 修改排序
    order(item) {
      var i = item.index,
        type = item.type,
        list = [...this.list];
      // 到顶
      if (item.index == 0 && type == "up") {
        this.common.message({ message: "到顶了", type: "warning" });
        return false;
      }
      // 到底
      if (item.index == list.length - 1 && type == "down") {
        this.common.message({ message: "到底了", type: "warning" });
        return false;
      }
      if (type == "up") {
        list.splice(i, 1, ...list.splice(i - 1, 1, list[i]));
      } else {
        list.splice(i, 1, ...list.splice(i + 1, 1, list[i]));
      }
      this.list = list;
      this.common.message({ message: "排序成功" });
    },
    // 上传成功
    success(ref, f) {
      var list = this.list,
        id = f.uid,
        i = 0;
      for (var j in list) {
        if (list[j].id == id) {
          i = j;
          break;
        }
      }
      this.list[i].path = ref.other.file.path;
      this.list[i].state = 1;
      this.list[i].thumb_path = ref.other.file.thumb_path;
    },
    // 删除
    del(index, path) {
      this.common.confirm().then(() => {
        var list = this.list,
          data = {
            path: path
          };
        list.splice(index, 1);
        if (!path) return false;
        this.axios.post("/admin/Index/del_file", data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            this.common.message({ message: ref.info });
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 中断上传
    stopUpload(index, file) {
      this.list[index].progress = 0;
      this.list[index].state = true;
      this.$refs.upload.abort(file);
      this.$refs.uploads.abort(file);
      this.common.message({
        type: "warning",
        message: "取消上传",
        duration: 2000
      });
    },
    // 初始化上传
    init(file) {
      this.show = true;
      this.list.push({
        title: file.name,
        size: file.size / 1024 / 1024,
        id: file.uid,
        progress: 0,
        file: file,
        state: false,
        path: "",
        state: 0,
        thumb_path: ""
      });
    },
    // 上传进度
    progress(e, f, l) {
      var list = this.list,
        id = f.uid,
        i = 0,
        n = 0;
      for (var j in list) {
        if (list[j].id == id) {
          i = j;
          break;
        }
      }
      n = ((e.loaded / e.total) * 100) | 0;
      this.list[i].progress = n;
    }
  }
};
</script>
<style scoped>
.list >>> .el-dialog__body {
  padding: 0 !important;
}
.list >>> .el-dialog__footer {
  padding: 20px;
}
/* 排序 */
.list .order i {
  width: 28px;
  cursor: pointer;
  color: #333;
  font-size: 16px;
  text-align: center;
}
.list .footer .left {
  font-size: 16px;
  line-height: 33px;
}
.list .footer .left span {
  font-weight: bold;
  margin-right: 30px;
  font-size: 16px;
}
.list .footer .left span:nth-of-type(2) {
  color: #409eff;
}
.list .footer .left span:nth-of-type(3) {
  color: #f40;
}
</style>